<template>
	<div class="Detail">
		<header>
			<div class="top">
				<span class="left" @click="goBack">
					<img src="~img/details/return.png">
				</span>
				<span class="right">
					<img src="~img/details/shopcar.png">
					<img src="~img/details/more.png">
				</span>
			</div>
		</header>
		<DetailSwiper :SwiperList="SwiperList"></DetailSwiper>
		<DetailContent :DetailContent="DetailContent"></DetailContent>
		<div class="bg"></div>
		<div class="tab" >
				<div class="tab-title">
					<router-link
						tag="h3"
						v-for="(item,index) of tabList"
						:class="{active:index===current}"
						@click.native="handleTab(index)"
						:key="item.id"
						:to="item.tabUrl"
						>{{item.tabTitle}}
					</router-link>
					
				</div>
		</div>
		<div class="details-options" v-if="isShow">
			<div class="opacity" @click="close()"></div>
			<div class="options">
				<div class="option-top">
					<div class="options-img">
						<img src="~img/details/head_img.jpg"  />
					</div>
					<div class="options-info">

						 	 <h2>{{DetailsInfo.newPrice | Fiexd | rmb}}</h2>
						 	<p>库存123456件</p>
							<p>请选择商品属性</p>
					</div>
					
					<div class="close">
						<button type="button"></button>

					</div>
					<div class="buy-number">
						<h2>购买数量</h2>
						<div>
							<button type="button" class="reduce" @click.prevent="reduce()">-</button>
							<input 
								type="text" 
								v-model="number"
								@blur="blur()"
								ref="num"
								/>
							<button type="button" class="add" @click.prevent="add()">+</button>
						</div>
					</div>
				</div>	

				<div class="option-middle">
					<h2>{{size.title}}</h2>
					<ul>
						<li 
							:class="{ active : index === activeA}"
							v-for="(item,index) of size.optionItems"
							@click="handleChoseA(index)"
							:key="index"

							>
							{{item}}
						</li>
						
					</ul>
				</div>
				<div class="option-bottom">
					<h2>{{age.title}}</h2>
					<ul>
						<li 
							:class="{ active : index === activeB}"
							v-for="(item,index) of age.optionItems"
							@click="handleChoseB(index)"

							:key="index"

							>
							{{item}}
						</li>
						
					</ul>
				</div>
				<button class="confirm" @click="confirm">确定</button>

			</div>
		</div>
		<div class="MenBar">
			<div class="btn">
				<button type="button" class="shop" @click="open()">加入购物车</button>
				<button type="button" class="buy" @click="open()">立即购买</button>
			</div>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
import DetailSwiper from "./components/DetailSwiper"
import DetailContent from "./components/DetailContent"
export default{
	name:"Detail",
	components:{
		DetailSwiper,
		DetailContent,
	},
	data(){
		return {
			SwiperList:[],
			tabList:[
				{
					"id":"001",
					"tabTitle":"商品详情",
					"tabUrl":"/Detail/ProDetails"
				},{
					"id":"002",
					"tabTitle":"买家口碑",
					"tabUrl":"/Detail/PublicPraise"
				}
			],
			DetailContent:{},
			current:0,
			size:{},
			age:{},
			DetailsInfo:{},
			activeA:0,
			activeB:0,
			number:1,
			isShow:false,
			arr:[],
			id:1,

		}
	},
	methods:{
		goBack(){
			this.$router.go(-1)
		},
		handleTab(i){
			this.current=i
		},
		handleChoseA(i)
		{
			this.activeA=i
			
		},
		handleChoseB(i)
		{
			this.activeB=i
		},
		add(){
			this.number++
		},
		reduce(){
			if(this.number>1)
				this.number--
		},
		blur(){
			let val=parseInt(Math.abs(this.$refs.num.value));

			if(isNaN(val))
			{
				return	this.number=1;
			}else{
				return this.number=val;
			}
		},
		close(){
			this.isShow=false;
		},
		open(){
			this.isShow=true;
		},
		confirm(){
			this.close();
			let proItem={
				"id":this.id,
				"imgUrl":"~img/details/head_img.jpg",
				"des":this.DetailsInfo.title,
				"nums":this.number,
				"price":parseInt(this.DetailsInfo.newPrice),
			}
			this.arr.push(proItem);
			console.log(this.arr);
		
			localStorage.setItem("proList",JSON.stringify(this.arr))
			this.id++;
		}
		
	},
	filters:{
			Fiexd(v){
				return parseInt(v).toFixed(2);
			},
			rmb(v){
				return "￥"+v
			}
		
	},
	mounted(){
			this.$http.get('/api/Details.json')
			.then((res)=>{
				let resData=res.data;
				this.SwiperList=resData.SwiperList;
				this.DetailContent=resData.DetailsInfo;
				this.size=resData.optionList.size;
				this.age=resData.optionList.age;
				this.DetailsInfo=resData.DetailsInfo;
			})

	}
}
</script>

<style lang="scss" scoped>
.Detail{
	header{
	position:relative;
	.top{
		width: 100%;
		padding: 0 23px;
		margin-top: 8px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		z-index:999;
		position:2;
		position:absolute;
		span{
			display: block;
			width:52px;
			height: 52px;
			img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.right{
			width: 145px;
			display: flex;
			justify-content:space-between;
			img{
				width:52px;
				height: 52px;
			}
		}
	}
}
	DetailSwiper{
		position:absolute;
		
	}
	.bg{
		background:#eeeeee;
		width: 100%;
		height: 32px;
	}
	.tab{
		.tab-title{
			height: 86px;
			display: flex;
			justify-content: space-around;
			align-items:center;
			h3{
				width: 150px;
				height: 51px;
				line-height: 51px;
				text-align: center;
				font-size: 26px;
				color:#999999;
				
			}
			.active{
				background-size:150px 3px;
				color:#FF9900;
				background: url('~img/details/tab_bg.jpg') no-repeat bottom;
			}
		}
	}
	
	/*遮罩层*/
	.details-options{
		width: 100%;
		height:100%;
		.opacity{
			content: " ";
			width: 100%;
			height: 100%;
			background: #000000;
			opacity: 0.5;
			position: fixed;
			top:0;
			z-index: 20;
		}
		.options{
			position: fixed;
			z-index: 25;
			width: 100%;
			box-sizing:border-box;
			padding: 0 42px;
			
			bottom:101px;
			background: #FFFFFF;
			
			@mixin h2{
				font-size: 30px;
				font-family: "SimSun";
				color: #333333;
			}
			
			@mixin ul{
				ul{
					display: flex;
					li{
						margin-right: 20px;
						height: 45px;
						background: #dddddd;
						color:#999999;
						font-size: 25px;
						border-radius:8px;
						line-height: 45px;
						text-align: center;
					}
					.active{
						color: #fff;
						background: #ff9900;
					}
				}
			}

		/*头部*/
		.option-top{
	
				height: 209px;
				position:relative;
				.options-img{
					width: 202px;
					height: 202px;
					position: absolute;
					margin-top: -28px;
					top:0;
					left:0;
					border: 7px solid #dddddd;
					border-radius: 7px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.options-info{
					width: 188px;
					height: 100%;
					display: flex;
					margin: 0 auto;
					flex-direction:column;
					justify-content: center;
					line-height: 33px;
					h2{
						color: #eb2222;
						font-size: 30px;
					}
					p{
						font-size: 25px;
						color: #333333;
					}
				}
				.close
				{
					position: absolute;
					right: 0;
					top:28px;
					button{
						width: 56px;
						height: 56px;
						display: block;
						background: url("~img/details/close.png") no-repeat;
						background-size: 100%;
						
					}
				}
				.buy-number{
					display: flex;
					justify-content:space-between;
					font-size: 0;
					h2{
						display: block;
						margin-top:12px;
						@include h2;
					}
					div{
						button{
							width: 50px;
							height: 50px;
							color:#fff;
							font-size: 30px;
							background: #999999;
						}
						input{
							font-size: 30px;
							width: 100px;
							height: 46px;
							text-align: center;
							border-top: 2px solid #dddddd;
							border-bottom:2px solid #dddddd;
							appearance: none;
						}
					}
				}
			}
			/*中部*/
			.option-middle{
				
				h2{
					@include h2;
					margin: 78px 0 20px 0;
				}
				@include ul;
				li{
					width: 120px;
				}
			}
			.option-bottom{
				h2{
					@include h2;
					margin: 43px 0 20px 0;
				}
				@include ul;
				li{
					width: 175px;
				}
			}
			
			.confirm{
				width: 200px;
				height: 40px;
				border-radius:8px;
				color: #fff;
				line-height: 40px;
				display: block;
				background: #ff9900;
				margin: 45px auto 50px auto;
			}
		}
	}
	/*底部*/
	.MenBar{
		background: #fff;
		height: 100px;
		border-top:  1px solid #dddddd;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 999;
		.btn{
			height: 100%;
			width:400px;
			float: right;
			display: flex;
			button{
				width: 50%;
				height: 100%;
				color: #fff;
			font-size: 30px;
			}
			.shop{
				background: #FF9900;
			}
			.buy{
				background: #eb2222;
			}
		}
	}	
}

</style>